<template>
    <el-card class="box-card">

        <span>{{message}}</span>
        <el-form ref="form" :model="user" label-width="80px">
            <el-form-item label="账号">
                <el-input v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input type="password" v-model="user.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="login">登录</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
    export default {
        name: "LoginView",
        data(){
            return {
                message:"", //错误信息
                user:{ //账号密码
                    username:"",
                    password:""
                }
            }
        },
        methods:{
            login(){
                console.log(this.user);
                //发送登录请求
                this.axios.post("login","username=" + this.user.username + "&password=" + this.user.password)
                    .then(result => {
                       console.log(result.data);
                       //将token保存localStorage
                        if(result.data.code == 200){
                            localStorage.setItem("token",result.data.data);
                            localStorage.setItem("username",this.user.username);
                            //跳转主页面
                            this.$router.push({path:'/main'});
                        }else{
                            this.message = result.data.message;
                        }
                    });
            }
        }
    }
</script>

<style scoped>
    .box-card {
        margin: 50px auto;
        width: 480px;
    }
</style>
